<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<title>Spring 3 MVC Series - User Manager</title>
<!-- <script type="text/javascript" -->
<%-- 	src="<c:url value="/resources/haovd/js/jquery.uploadfile.js" />"></script> --%>
<!-- <script type="text/javascript" -->
<%-- 	src="<c:url value="/resources/haovd/js/jquery.uploadfile.min.js" />"></script> --%>
<script type="text/javascript"
	src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
	src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript"
	src="<c:url value="/resources/haovd/js/haovd.js" />"></script>
<style type="text/css">
#map-canvas {
	height: 500px;
	width: 900px;
	margin: 0px;
	padding: 0px;
	margin: 0px;
}
</style>
<script>
	var map;
	function initialize() {
		var mapOptions = {
			zoom : 8,
			center : new google.maps.LatLng(21.0323172736804,
					105.84891800768673)
		};
		map = new google.maps.Map(document.getElementById('map-canvas'),
				mapOptions);

		$.getJSON("/spring3essentials/gmap/hao/listjsonuser", function(data) {
			$.each(data, function(i, user) {
				var latLng = new google.maps.LatLng(user.xmap, user.ymap);
				placeMarker(latLng, map, user);
			});

		});
		//		var json = $("#userJson").val().replace(/\'/g, "\"");
		//		var obj = JSON.parse(json);
		// 		$.each($.getJSON("/spring3essentials/gmap/hao/listjsonuser"), function(key, data) {
		// 			alert(data);
		// 			var latLng = new google.maps.LatLng(data.xmap, data.ymap);
		// 			placeMarker(latLng, map, "/spring3essentials/resources/haovd/img/"
		// 					+ data.avatar, data.id);
		// 		});

		google.maps.event.addListener(map, 'click', function(e) {
			getPosition(e.latLng, map);
		});
	}

	function getPosition(position, map) {
		map.panTo(position);
		var x = position.lat();
		var y = position.lng();
		$("input[name='xmap']").val(x);
		$("input[name='ymap']").val(y);

	}

	function placeMarker(position, map, user) {
		var url = "/spring3essentials/resources/haovd/img/" + user.avatar;
		var image1 = new google.maps.MarkerImage(url, null, /* size is determined at runtime */
		null, /* origin is 0,0 */
		null, /* anchor is bottom center of the scaled image */
		new google.maps.Size(50, 50));
		var marker = new google.maps.Marker({
			position : position,
			map : map,
			icon : image1,
			zIndex : 1
		});
		marker.setTitle();
		attachSecretMessage(marker, user);
	}
	
// 	"<input type="hidden" id="age" value="${user.age}" /> <input type="hidden"
// 		id="vocation" value="${user.vocation}" /> <input type="hidden"
// 		id="address" value="${user.address}" /> <input type="hidden"
// 		id="phonenumber" value="${user.phonenumber}" /> <input
// 		type="hidden" id="notes" value="${user.notes}" /> <input
// 		type="hidden" id="xmap" value="${user.xmap}" /> <input
// 		type="hidden" id="ymap" value="${user.ymap}" /> 

	
	function attachSecretMessage(marker, user) {
		var stringhtml = "<html><div class='mcon'>"+
		"<input type='hidden' value='"+user.id+"' id=\"id\" />"+
		"<p id=\"name\">"+user.name+"</p>"+
		"<p id=\"age\">"+user.age+"</p>"+
		"<p id=\"vocation\">"+user.vocation+"</p>"+
		"<p id=\"address\">"+user.address+"</p>"+
		"<p id=\"phonenumber\">"+user.phonenumber+"</p>"+
		"<p id=\"notes\">"+user.notes+"</p>"+
		"<input type='hidden' value='"+user.avatar+"' id=\"avatar\" />"+
		"<input type='hidden' value='"+user.xmap+"' id=\"xmap\" />"+
		"<input type='hidden' value='"+user.ymap+"' id=\"ymap\" />"+
		"<button class='edit' onclick='editfunc(this)'>Edit</button>"+
		"<a class='del' onclick=\"return confirm('Ban co muon xoa khong?');\" href='/spring3essentials/gmap/hao/delete/"+user.id+".json'>Del</a>"+
		
		"</div></html>";
		
		var infowindow = new google.maps.InfoWindow({
			content : stringhtml
		});

		google.maps.event.addListener(marker, 'click', function() {
			infowindow.open(marker.get('map'), marker);
		});
	}

	google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function editfunc(t) {
	//alert(t.innerText);
	//t.preventDefault();
	var ct = $(t).parent();
	$("input[name='id']").val($(ct).find("#id").val());
	$("input[name='name']").val($(ct).find("#name").text());
	$(".img").load("edit?img="+$(ct).find("#avatar").val());
	$("input[name='age']").val($(ct).find("#age").text());
	$("input[name='xmap']").val($(ct).find("#xmap").val());
	$("input[name='ymap']").val($(ct).find("#ymap").val());
	$("input[name='vocation']").val($(ct).find("#vocation").text());
	$("textarea[name='address']").text($(ct).find("#address").text());
	$("input[name='phonenumber']").val($(ct).find("#phonenumber").text());
	$("textarea[name='notes']").text($(ct).find("#notes").text());
	var action = $("#user").attr("action");
	$("#user").attr("action",action.replace("add","edit"));
};
</script>
<link rel="stylesheet" type="text/css"
	href="<c:url value="/resources/haovd/css/haovd.css" />" />

</head>

<body>

	<div class="wrapper">
		<div class="header">
			<img src="<c:url value="/resources/haovd/img/developers-logo.svg" />"
				alt="Google">
		</div>
		<div class="line"></div>
		<div class="sector">
			<input type="hidden" id="userJson" value="${userJson}" />
			<div class="left-sector">
				<div class="taskbar">
					<button id="btnadd">Tạo User</button>
				</div>
				<h2>Quản lý người dùng</h2>
				<h4 id="output_process"></h4>
				<c:set var="contextPath" value="${pageContext.request.contextPath}" />
				<form:form method="post" action="${contextPath}/gmap/hao/add"
					commandName="user" enctype="multipart/form-data">
					<!--  id, name, age, vocation, avatar, address, phonenumber, notes -->
					<form:hidden path="id" />
					<table>
						<tr>
							<td><form:label path="name">Tên:</form:label></td>
							<td><form:input path="name" /></td>
						</tr>
						<tr>
							<td><form:label path="age">Tuổi:</form:label></td>
							<td><form:input path="age" /></td>
						</tr>
						<tr>
							<td><form:label path="vocation">Nghề:</form:label></td>
							<td><form:input path="vocation" /></td>
						</tr>
						<tr>
							<td><form:label path="avatar">Ảnh:</form:label></td>
							<td><div class="img"></div> <input type="file" name="file" /></td>
						</tr>
						<tr>
							<td><form:label path="address">ĐC:</form:label></td>
							<td><form:textarea path="address" /></td>
						</tr>
						<tr>
							<td><form:label path="phonenumber">ĐT:</form:label></td>
							<td><form:input path="phonenumber" /></td>
						</tr>
						<tr>
							<td><form:label path="notes">Ghi chú:</form:label></td>
							<td><form:textarea path="notes" /></td>
						</tr>
						<tr>
							<td><form:label path="xmap">X Map:</form:label></td>
							<td><form:input readonly="true" value="0" path="xmap" /></td>
						</tr>
						<tr>
							<td><form:label path="ymap">Y Map:</form:label></td>
							<td><form:input readonly="true" value="0" path="ymap" /></td>
						</tr>
						<tr>
							<td></td>
							<td><form:button value="Tạo">Lưu lại</form:button><input
								type="reset" value="Xóa" /></td>
						</tr>

					</table>
				</form:form>
			</div>
			<div class="right-sector" style="padding-top: 10px">
<!-- 				<table border="1px" cellpadding="0" cellspacing="0" class="listuser"> -->

<!-- 					<thead> -->
<!-- 						<tr> -->
<!-- 							<th>ID</th> -->
<!-- 							<th>NAME</th> -->
<!-- 							<th>Avatar</th> -->
<!-- 							<th>Action</th> -->
<!-- 						</tr> -->
<!-- 					</thead> -->
<!-- 					<tbody> -->
<%-- 						<c:forEach var="user" items="${userList}"> --%>
<!-- 							<tr> -->
<%-- 								<td id="id">${user.id}</td> --%>
<%-- 								<td id="name">${user.name}</td> --%>
<%-- 								<td id="avatar">${user.avatar}</td> --%>
<!-- 								<td><a class="edit" href="">Edit</a> <input type="hidden" -->
<%-- 									id="age" value="${user.age}" /> <input type="hidden" --%>
<%-- 									id="vocation" value="${user.vocation}" /> <input type="hidden" --%>
<%-- 									id="address" value="${user.address}" /> <input type="hidden" --%>
<%-- 									id="phonenumber" value="${user.phonenumber}" /> <input --%>
<%-- 									type="hidden" id="notes" value="${user.notes}" /> <input --%>
<%-- 									type="hidden" id="xmap" value="${user.xmap}" /> <input --%>
<%-- 									type="hidden" id="ymap" value="${user.ymap}" /> <a class="del" --%>
<!-- 									onclick="return confirm('Ban co muon xoa khong?');" -->
<%-- 									href="${contextPath}/gmap/hao/delete/${user.id}.json">Del</a></td> --%>
<!-- 							</tr> -->
<%-- 						</c:forEach> --%>
<!-- 					</tbody> -->
<!-- 				</table> -->
				<div id="map-canvas"></div>
			</div>
		</div>

		<div class="footer"></div>
	</div>


</body>
</html>